<template>
  <div id="change_password">
    <div class="CP_box">
      <div class="box_head">
        <span>修改密码</span>
        <i style="font-weight:bold;" class="el-icon-close" @click="complete"/>
      </div>
      <div class="box_body">
        <el-steps :active="active" finish-status="success" class="stepLine">
          <el-step title="第一步"></el-step>
          <el-step title="第二步"></el-step>
          <el-step title="第三步"></el-step>
        </el-steps>
        <div class="firstStep" v-if="active==1">
          <span>请输入原密码</span>
          <el-input v-model="beforePw"></el-input>
        </div>
        <div class="secondStep" v-if="active==2">
          <span>请输入新密码</span>
          <el-input v-model="beforePw"></el-input>
          <span>请确认新密码</span>
          <el-input v-model="beforePw"></el-input>
        </div>
        <div class="thirdStep" v-if="active==3">
          <el-button @click="complete" class="complete">完成</el-button>
        </div>
        <div class="box_but">
          <el-button style="margin-top: 12px;" @click="next" class="next" v-if="active==1||active==2">下一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "changePassword",
  data() {
    return {
      active: 1,
      beforePw: ''
    }
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    complete() {
      this.$emit('closeCP', 'changePassword')
    }
  }
}
</script>

<style lang="less" scoped>
#change_password {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;

  .CP_box {
    width: 900px;
    height: 50%;
    margin: 200px auto 0;
    background-color: #000000;
    border-radius: 10px;
    border: 1px solid #808080;

    .box_head {
      color: white;
      font-size: 20px;
      margin-top: 10px;

      span {
        font-family: songFont;
        margin-top: 20px;
        margin-left: 10px;
      }

      i {
        cursor: pointer;
        float: right;
        margin-right: 10px;

        &:hover {
          color: #808080;
        }
      }
    }

    .box_body {
      width: 800px;
      height: 400px;
      margin: 50px auto 0;

      span {
        color: white;
      }

      .firstStep {
        margin-top: 50px;
      }

      .secondStep {
        margin-top: 50px;
      }

      .thirdStep {
        display: flex;
        justify-content: center;
        margin-top: 50px;

        .complete {
          color: black;
          font-weight: bold;
          background-color: #ffffff;
          border-color: #ffffff;

          &:hover {
            color: #808080;
          }
        }
      }

      .box_but {
        display: flex;
        justify-content: center;

        .next {
          color: black;
          font-weight: bold;
          background-color: #ffffff;
          border-color: #ffffff;

          &:hover {
            color: #808080;
          }
        }
      }
    }
  }
}
</style>
